<template>
    <div>
      <el-dialog
        :visible.sync="drawer"
        :append-to-body="true"
        top="0.1vh"
        :show-close="false"
        @close="handleClose"
        width="80%"
      >
        <div class="title flex-between" slot="title">
          <div class="fz15">
            <div v-if="getFilterImage(name)=='image'" style="padding:10px 0;">
              <img :src="name" alt="" style="width:40px;"/>
            </div>
            <div v-else>
              {{ name || '查看' }}
            </div>
          </div>
          <div class="title-right">
            <div class="close-box no-border" @click="handleClose"><span class="el-icon-close"></span></div>
          </div>
        </div>
  
        <div class="titleTab" style="position: relative">
          <el-tabs v-model="tabIndex" type="border-card" tab-position="top" @tab-click="handleClick">
            <!-- <el-tab-pane label="详情" name="1"></el-tab-pane> -->
            <el-tab-pane
              v-for="item in tabData"
              :key="item.table_name_en"
              :label="item.table_name"
              :name="item.table_name_en"
            ></el-tab-pane>
          </el-tabs>
        </div>
  
        <!-- 详情 -->
        <div class="form-box" ref="formBox">
          <div class="mt50" v-if="tabIndex == 1">
            
            <VFormRender
              v-if="drawer"
              ref="preForm"
              :form-json="importTemplate"
              :form-data="allocation.module_info"
              :developData="developData"
              :preview-state="true"
            >
              <!--动态表格 -->
            </VFormRender>
            <!-- <div class="button from-foot-btn fix btn-shadow mt30" v-if="type === 'edit'">
            <el-button size="small" class="el-btn" @click="setForm">取消</el-button>
            <el-button size="small" type="primary" @click="saveFn()">保存</el-button>
          </div> -->
            <!-- 评论和操作日志 -->
            <div class="comment-tab" :class="info.crudInfo.show_log && info.crudInfo.show_comment ? 'border-top' : ''">
              <el-tabs v-model="activeName" @tab-click="handleCommentClick">
                <el-tab-pane
                  :label="`${info.crudInfo.comment_title || '评论'}(${commentCount})`"
                  name="1"
                  v-if="info.crudInfo.show_comment"
                >
                  <div class="comment-box">
                    <oa-comment
                      type="develop"
                      ref="oaComment"
                      :list="commentList"
                      @sendComment="sendComment"
                      @deleteReply="deleteReply"
                    ></oa-comment>
                  </div>
                </el-tab-pane>
                <el-tab-pane :label="`操作日志(${logCount})`" name="2" v-if="info.crudInfo.show_log">
                  <div class="comment-box">
                    <oa-log type="develop" :list="logList" :keyName="name"></oa-log>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
  
          <!-- 表格 -->
          <div class="mt50 table-box" v-if="tabIndex != 1">
            <div class="flex-between mb10">
              <div class="search">
                <div class="inTotal">共 {{ total }} 项</div>
                <el-input
                  v-model="where.keyword_default"
                  prefix-icon="el-icon-search"
                  size="small"
                  placeholder="请输入关键字"
                  clearable
                  class="input"
                  @change="getList"
                ></el-input>
              </div>
              <el-button size="small" icon="el-icon-plus" type="primary" @click="addData">新建</el-button>
            </div>
  
            <el-table :data="tableData" style="width: 100%" row-key="id" :key="keyVal" :height="height">
              <el-table-column
                v-for="(item, index) in tabInfo.showField"
                :prop="item.field_name_en"
                :label="item.field_name"
                :key="index"
                width="auto"
              >
                <template slot-scope="scope">
                  <div v-if="item.form_value === 'image'" class="img-box">
                    <img
                      v-for="(val, index) in scope.row[item.field_name_en]"
                      :key="index"
                      :src="val.url"
                      alt=""
                      class="img"
                      @click="lookViewer(val.url, val.name)"
                    />
                    <span v-if="!scope.row[item.field_name_en] || scope.row[item.field_name_en].length == 0">--</span>
                  </div>
                  <div v-else-if="item.form_value === 'input_percentage'">
                    <el-progress
                      :percentage="scope.row[item.field_name_en] ? scope.row[item.field_name_en] : 0"
                    ></el-progress>
                  </div>
                  <div v-else-if="item.form_value === 'tag'">
                    <el-popover
                      v-if="scope.row[item.field_name_en] && scope.row[item.field_name_en].length > 2"
                      placement="top-start"
                      trigger="hover"
                    >
                      <template>
                        <div class="flex_box">
                          <div class="tips" v-for="(val, index) in scope.row[item.field_name_en]" :key="index">
                            <el-tag size="small">
                              {{ val }}
                            </el-tag>
                          </div>
                        </div>
                      </template>
                      <div slot="reference">
                        <div class="flex_box">
                          <div class="tips" v-for="(val, index) in scope.row[item.field_name_en]" :key="index">
                            <el-tag size="small" v-if="index < 2">
                              {{ val }}
                            </el-tag>
                          </div>
                          <el-tag
                            v-if="scope.row[item.field_name_en] && scope.row[item.field_name_en].length > 2"
                            size="small"
                            >...</el-tag
                          >
                        </div>
                      </div>
                    </el-popover>
                    <template v-else>
                      <div class="flex_box">
                        <div class="tips" v-for="(val, index) in scope.row[item.field_name_en]" :key="index">
                          <el-tag size="small" v-if="index < 2">
                            {{ val }}
                          </el-tag>
                        </div>
                        <el-tag
                          v-if="scope.row[item.field_name_en] && scope.row[item.field_name_en].length > 2"
                          size="small"
                          >...</el-tag
                        >
                      </div>
                    </template>
                    <span v-if="!scope.row[item.field_name_en] || scope.row[item.field_name_en].length == 0">--</span>
                  </div>
                  <div v-else-if="item.form_value === 'switch'">
                    <el-switch
                      disabled
                      v-model="scope.row[item.field_name_en]"
                      :active-value="1"
                      :inactive-value="0"
                      active-text="开启"
                      inactive-text="关闭"
                    >
                    </el-switch>
                  </div>
  
                  <div v-else-if="item.form_value === 'textarea'">
                    <el-popover
                      placement="top-start"
                      width="350"
                      trigger="hover"
                      :content="scope.row[item.field_name_en]"
                    >
                      <div
                        class="over-text"
                        slot="reference"
                        v-if="scope.row[item.field_name_en] && scope.row[item.field_name_en].length > 11"
                      >
                        {{ scope.row[item.field_name_en] }}
                      </div>
                    </el-popover>
                    <span v-if="scope.row[item.field_name_en] && scope.row[item.field_name_en].length <= 11">
                      {{ scope.row[item.field_name_en] }}
                    </span>
                    <span v-if="!scope.row[item.field_name_en]">--</span>
                  </div>
                  <div v-else-if="['input_number', 'input_float', 'input_price'].includes(item.form_value)">
                    {{ scope.row[item.field_name_en] }}
                  </div>
                  <!-- 多选 -->
                  <div v-else-if="item.form_value == 'checkbox'">
                    <div
                      v-for="(val, index) in scope.row[item.field_name_en]"
                      class="dictionaries-tag over-text mr10"
                      :style="{
                        color: val.color ? val.color : '#1890ff',
                        background: val.color ? getColorFn(val.color, '0.1') : getColorFn('#1890ff', '0.1')
                      }"
                    >
                      {{ val.name }}
                    </div>
                    <div v-if="scope.row[item.field_name_en].length == 0">--</div>
                  </div>
                  <!-- 关联字典颜色 -->
                  <div
                    v-else-if="
                      scope.row[item.field_name_en] &&
                      Object.prototype.hasOwnProperty.call(scope.row[item.field_name_en], 'color')
                    "
                    class="dictionaries-tag over-text"
                    :style="{
                      color: scope.row[item.field_name_en].color ? scope.row[item.field_name_en].color : '#1890ff',
                      background: scope.row[item.field_name_en].color
                        ? getColorFn(scope.row[item.field_name_en].color, '0.1')
                        : getColorFn('#1890ff', '0.1')
                    }"
                  >
                    {{ scope.row[item.field_name_en].name }}
                  </div>
                  <div v-else>
                    {{ getValue(scope.row[item.field_name_en], item.form_value) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" fixed="right" width="130">
                <template slot-scope="scope">
                  <el-button type="text" @click="editTabsRow(scope.row)">编辑</el-button>
                  <el-button type="text" @click="deleteTabsRow(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="page-fixed">
              <el-pagination
                :page-size="where.limit"
                :current-page="where.page"
                @current-change="pageChange"
                layout="total, prev, pager, next, jumper"
                :total="total"
              />
            </div>
          </div>
        </div>
      </el-dialog>
  
      <!-- 新增 -->
      <add-drawer ref="addDrawer" :keyName="tabKey" :crud="crud" @getList="getList"></add-drawer>
      <!-- 配置按钮/配置tab -->
      <checkbox-dialog
        ref="checkboxDialog"
        :title="title"
        :type="`field`"
        :name="`所有关联实体`"
        :showName="`已展示实体`"
        @getData="getData"
      ></checkbox-dialog>
    </div>
  </template>
  <script>
  import { getColor } from '@/utils/format'
  import VFormRender from '@/components/form-render/index'
  import oaLog from '@/components/form-common/oa-log'
  import oaComment from '@/components/form-common/oa-comment'
  import addDrawer from '../components/addDrawer'
  import checkboxDialog from '@/components/develop/checkboxDialog'
  import {
    crudModuleCreateApi,
    crudModuleUpdateApi,
    crudModuleDelApi,
    crudModuleSaveApi,
    crudModuleInfoApi,
    crudModuleListApi,
    crudModuleFindApi,
    crudViewSaveApi,
    getModuleLogApi,
    getModuleCommentApi,
    saveModuleCommentApi,
    putModuleCommentApi,
    deleteModuleCommentApi
  } from '@/api/develop'
  export default {
    components: { VFormRender, checkboxDialog, addDrawer, oaLog, oaComment },
    props: {
      keyName: {
        type: String,
        default: ''
      },
      crud_id: {
        type: Number,
        default: 0
      },
      info: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        drawer: false,
        tabIndex: '1',
        height: `calc(100vh - 230px)`,
        activeName: '1',
        importTemplate: {
          formConfig: {},
          widgetList: []
        },
        developData: {
          data_id: 0,
          crud_name: '',
          show: '1'
        },
        name: '',
        tabKey: '',
        tabInfo: '',
        tabSave: 'tab',
        title: '',
        type: 'check',
        allocation: {
          association_table: []
        },
  
        crud: {
          crud_id: 0,
          crud_value: 0
        },
        logList: [],
        logCount: 0,
        commentCount: 0,
        commentList: [],
        logWhere: {
          page: 1,
          limit: 10
        },
        typelist: ['grid', 'card', 'grid-col', 'tab'],
        where: {
          page: 1,
          limit: 15,
          crud_value: 0,
          crud_id: 0,
          keyword_default: ''
        },
        total: 0,
        keyVal: 0,
        id: 0, // 当前列表的id值
        dropdownList: [],
        tabData: [],
        tableData: []
      }
    },
    created() {
      this.createForm()
    },
    mounted() {
      window.addEventListener('scroll', this.lazyLoading, true)
    },
    destroyed() {
      window.removeEventListener('scroll', this.lazyLoading)
    },
    computed: {
      getName() {
        let str = ''
        this.tabData.map((item) => {
          if (this.tabIndex == item.table_name_en) {
            str = item.table_name
          }
        })
        return str || ''
      }
    },
  
    watch: {
      info: {
        handler(val, oldVal) {
          if (val.crudInfo && val.crudInfo.id) {
            this.crud.crud_id = val.crudInfo.id
            this.where.crud_id = val.crudInfo.id
          }
          if (val.userOptions) {
            this.dropdownList = val.userOptions.options ? val.userOptions.options.create : []
            this.tabData = val.userOptions.options ? val.userOptions.options.tab : []
          }
        },
        deep: true
      }
    },
    methods: {
      // 滚动加载
      lazyLoading(e) {
        let document = this.$refs.formBox
          if (document) {
            // dengshunbo 2025-3-22
            let scrollTop = 0;
            if(document.scrollTop){
              scrollTop = document.scrollTop
            }else if(document.body){
              scrollTop = document.body.scrollTop
            }
            // end
            let clientHeight = document.clientHeight
            let scrollHeight = document.scrollHeight
            if (parseInt(scrollTop + clientHeight) + 1 >= scrollHeight) {
              if (this.logCount / 10 > this.logWhere.page && this.activeName == 2) {
                this.logWhere.page = this.logWhere.page + 1
                this.getLogList()
              } else if (this.commentCount / 10 > this.logWhere.page && this.activeName == 1) {
                this.logWhere.page = this.logWhere.page + 1
                this.getCommentList()
              }
            }
          }
      },
  
      getColorFn(color, opacity) {
        return getColor(color, opacity)
      },
  
      handleCommentClick(e) {
        this.logWhere.page = 1
        if (this.activeName == 1) {
          this.commentList = []
          this.getCommentList()
        } else {
          this.logList = []
          this.getLogList()
        }
        this.$refs.oaComment.cancelComment()
      },
      // 保存评论
      sendComment(val, replyId, pid) {
        let obj = {
          pid: pid,
          comment: val
        }
        // 编辑
        if (replyId) {
          putModuleCommentApi(this.keyName, replyId, { comment: val }).then((res) => {
            this.commentList = []
            this.logWhere.page = 1
            this.getCommentList()
          })
        } else {
          saveModuleCommentApi(this.keyName, this.id, obj).then((res) => {
            this.commentList = []
            this.logWhere.page = 1
            this.getCommentList()
          })
        }
        this.$refs.oaComment.cancelComment()
      },
      // 删除评论
      deleteReply(item) {
        this.$modalSure('你确定要删除此评论吗').then(() => {
          deleteModuleCommentApi(this.keyName, item.id).then((res) => {
            this.commentList = []
            this.getCommentList()
          })
        })
      },
  
      addData() {
        this.$refs.addDrawer.openBox()
      },
      // 获取操作日志列表
      getLogList() {
        if (this.info.crudInfo.show_log) {
          getModuleLogApi(this.keyName, this.id, this.logWhere).then((res) => {
            this.logList = [...this.logList, ...res.data.list]
            this.logCount = res.data.count
          })
        }
      },
  
      // 获取评论列表
      getCommentList() {
        if (this.info.crudInfo.show_comment) {
          getModuleCommentApi(this.keyName, this.id, this.logWhere).then((res) => {
            this.$nextTick(() => {
              this.commentList = [...this.commentList, ...res.data.list]
  
              this.commentCount = res.data.count
            })
          })
        }
      },
  
      pageChange(val) {
        this.where.page = val
        this.getList()
      },
  
      // 数组转成字符串
      getValue(val, type) {
        let str = ''
        if (val == '') {
          str = '--'
        } else if (Array.isArray(val)) {
          str = val.toString()
        } else {
          str = val
        }
        return str || '--'
      },
  
      dropdownSearch(item) {
        this.tabKey = item.table_name_en
        setTimeout(() => {
          this.$refs.addDrawer.openBox()
        }, 300)
      },
      handleClick(e) {
        if (e.index != 0) {
          let index = e.index - 1
          this.tabKey = this.tabIndex
          this.getInfo()
          this.getList()
        }
        if (this.tabIndex == 1) {
          this.type = 'add'
          this.$nextTick(() => {
            this.$refs.preForm.setReadMode(true)
          })
        }
      },
  
      getInfo() {
        crudModuleInfoApi(this.tabKey, 0).then((res) => {
          this.tabInfo = res.data
        })
      },
  
      getList() {
        this.where.crud_value = this.crud.crud_value
        crudModuleListApi(this.tabKey, this.where).then((res) => {
          this.total = res.data.count
          this.tableData = res.data.list
          this.keyVal = this.keyVal + 1
        })
      },
  
      openCheck(type) {
        let selectList = []
        let ids = []
        if (type === 'tab') {
          this.tabSave = 'tab'
          this.title = '配置tab显示项'
          if (this.tabData && this.tabData.length > 0) {
            selectList = this.tabData
            this.tabData.map((item) => {
              ids.push(item.id)
            })
          } else {
            ids = []
          }
        } else {
          this.tabSave = 'create'
          this.title = '配置新增按钮'
          if (this.dropdownList && this.dropdownList.length > 0) {
            selectList = this.dropdownList
            this.dropdownList.map((item) => {
              ids.push(item.id)
            })
          } else {
            ids = []
          }
        }
  
        this.allocation.association_table.forEach((item) => {
          item.field_name = item.table_name
        })
  
        let obj = {
          list: this.allocation.association_table,
          ids,
          selectList
        }
        this.$refs.checkboxDialog.openBox(obj, ids)
      },
  
      openBox(row, data, info, name) {
        this.name = name
        if (info) {
          if (info.crudInfo && info.crudInfo.id) {
            this.crud.crud_id = info.crudInfo.id
            this.where.crud_id = info.crudInfo.id
          }
  
          if (info.userOptions) {
            this.dropdownList = info.userOptions.options ? info.userOptions.options.create : []
            this.tabData = info.userOptions.options ? info.userOptions.options.tab : []
          }
        }
        this.developData = {
          data_id: row.id,
          crud_name: this.keyName,
          show: '1'
        }
  
        this.id = row.id
  
        this.createForm(this.id)
        this.where.crud_value = row.id
        this.crud.crud_value = this.id
        if (data) {
          if(data.module_info.shouquanmenjinzu){
            data.module_info.shouquanmenjinzu = data.module_info.shouquanmenjinzu.split(',')
          }
          if(data.module_info.yaoqingmenjinzu){
            data.module_info.yaoqingmenjinzu = data.module_info.yaoqingmenjinzu.split(',')
          }
          if(data.module_info.access_control_team){
            data.module_info.access_control_team = data.module_info.access_control_team.split(',')
          }
          this.allocation = data
        }
        this.drawer = true
        setTimeout(() => {
          this.setForm()
        }, 300)
  
        this.getCommentList()
        this.getLogList()
      },
  
      async createForm(id) {
        let obj = {
          id: id
        }
        const res = await crudModuleCreateApi(this.keyName, obj)
        res.data.form_info.options.forEach((item) => {
          if (!this.typelist.includes(item.type)) {
            item.isShow = false
          } else if (item.type == 'grid') {
            item.cols.forEach((grid) => {
              grid.widgetList.forEach((gridItem) => {
                gridItem.isShow = false
              })
            })
          } else if (item.type == 'card') {
            item.widgetList.forEach((gridItem) => {
              gridItem.isShow = false
            })
          } else if (item.type == 'tab') {
            item.tabs.forEach((tab) => {
              tab.widgetList.forEach((gridItem) => {
                gridItem.isShow = false
              })
            })
          } else if (item.type == 'grid-col') {
            item.widgetList.forEach((gridItem) => {
              gridItem.isShow = false
            })
          }
        })
  
        this.$nextTick(() => {
          if (res.data.form_info.global_options) {
            this.$set(this.importTemplate, 'formConfig', res.data.form_info.global_options)
          }
          this.$set(this.importTemplate, 'widgetList', res.data.form_info.options || [])
        })
      },
  
      handleClose() {
        this.logWhere.page = 1
        this.logList = []
        this.commentList = []
        this.tabIndex = '1'
        this.drawer = false
        this.developData.show = '0'
        this.$emit('getList')
      },
  
      getData(data) {
        let obj = {}
        if (this.tabSave === 'create') {
          obj.options = {
            create: data.selectList
          }
        } else {
          obj.options = {
            tab: data.selectList
          }
        }
        if (this.crud_id > 0) {
          crudViewSaveApi(this.crud_id, obj).then((res) => {
            this.$emit('getInfo')
          })
        } else {
          crudModuleSaveApi(this.keyName, obj).then((res) => {
            this.$emit('getInfo')
          })
        }
      },
  
      async deleteRow() {
        await this.$modalSure('您确认要删除吗')
        await crudModuleDelApi(this.keyName, this.id)
        await this.$emit('getList')
        await this.handleClose()
      },
  
      async editRow() {
        this.tabIndex = '1'
        this.$refs.preForm.setReadMode(false)
        this.type = 'edit'
      },
  
      async editTabsRow(item) {
        const data = await crudModuleFindApi(this.tabKey, item.id)
        await this.$refs.addDrawer.openBox(item.id, data.data)
      },
      async deleteTabsRow(item) {
        await this.$modalSure('您确认要删除吗')
        await crudModuleDelApi(this.tabKey, item.id)
        await this.getList()
      },
  
      saveFn() {
        this.$refs['preForm']
          .getFormData()
          .then((formData) => {
            if (this.id > 0) {
              this.upladData(this.id, formData)
            }
          })
          .catch((error) => {
            this.$message.error(error)
          })
      },
  
      upladData(id, data) {
        this.loading = true
        crudModuleUpdateApi(this.keyName, id, data)
          .then((res) => {
            this.loading = false
  
            this.type = 'check'
            this.setForm()
          })
          .catch((err) => {
            this.loading = false
          })
      },
  
      setForm() {
        this.type = 'check'
        this.$refs.preForm.setReadMode(true)
      },
      //dengshunbo 2025-3-13
      getFilterImage(val){
        if(val){
           if(this.isImagePath(val)){
              return 'image';
           }else{
              return val;
           }
        }else{
           return '--';
        }
  
      },
      // 判断字符串是否是图片路径
      isImagePath(path) {
         return /\.(jpg|jpeg|png|gif|webp)$/i.test(path);
      },
    }
  }
  </script>
  <style scoped lang="scss">
  .form-box {
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .img {
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
  .fz15 {
    font-size: 15px;
  }
  .fz30 {
    font-size: 30px;
    margin-left: 10px;
    color: #909399;
  }
  .title-right {
    display: flex;
    align-items: center;
    .icongengduo2 {
      font-weight: 400;
      margin: 0 10px;
    }
  }
  .titleTab {
    /deep/ .el-tabs__item.is-active {
      border-right-color: transparent !important;
      border-left-color: transparent !important;
      &::after {
        content: '';
        height: 2px;
        width: 100%;
        background-color: #1890ff;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    /deep/ .el-tabs__item {
      line-height: 40px !important;
      font-size: 14px;
    }
    /deep/ .el-tabs__header {
      background-color: #f7fbff;
      border-bottom: none;
    }
    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }
    /deep/ .el-tabs__active-bar {
      top: 0;
    }
    .el-tabs--border-card {
      height: 39px;
      position: fixed;
      top: 56px;
      width: 100%;
      z-index: 4;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
  }
  /deep/ .el-drawer__header {
    border-bottom: none !important;
  }
  .border-top {
    border-top: 1px solid #f2f6fc;
  }
  
  .comment-tab {
    /deep/ .el-tabs__header {
      height: 54px;
  
      line-height: 54px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #303133;
      .el-tabs__item {
        line-height: none;
      }
    }
    .comment-box {
      min-height: 300px;
      margin-top: 20px;
    }
  }
  .mt50 {
    margin-top: 62px;
    padding: 0 20px;
  }
  
  .el-icon-setting {
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 10px;
    z-index: 100;
    color: #909399;
  }
  .search {
    display: flex;
    align-items: center;
    .inTotal {
      margin: 0;
      margin-right: 10px;
      white-space: nowrap;
    }
  }
  .flex-end {
    display: flex;
    justify-content: flex-end;
  }
  .close-box {
    cursor: pointer;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    border: 1px solid #909399;
    text-align: center;
    line-height: 30px;
    color: #909399;
  }
  .no-border {
    border: none !important;
  }
  .dictionaries-tag {
    max-width: 100px;
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    height: 24px;
    padding: 0 8px;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    border-radius: 3px;
  }
  </style>
  